<!-- StudentCenter.vue -->
<template>
  <div class="student-center-container">
    <el-card class="box-card">
      <!-- 顶部信息区域 -->
      <StudentHeader :student-info="studentInfo" />

      <!-- 主体内容区域 -->
      <div class="student-content">
        <!-- 侧边栏菜单 -->
        <StudentSidebar
            :active-menu="activeMenu"
            @menu-change="handleMenuChange"
        />

        <!-- 右侧内容区域 -->
        <div class="content-main">
          <!-- 账号设置 -->
          <AccountSettings
              v-if="activeMenu === 'accountSettings'"
              :user-info="studentInfo"
          />

          <!-- 其他功能占位 -->
          <div v-else class="feature-placeholder">
            <el-empty description="功能开发中，敬请期待" />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import StudentHeader from './components/StudentHeader.vue'
import StudentSidebar from './components/StudentSidebar.vue'
import AccountSettings from './components/AccountSettings.vue'

interface StudentInfo {
  id: number
  name: string
  avatar: string | null
  registerTime: string
  classInfo: string
  school: string
  activityLevel: string
  onlineTime: string
  lastLogin: string
  studentId: string
  phone: string
  email: string
  grade: string
  className: string
}

const activeMenu = ref('accountSettings')
const studentInfo = ref<StudentInfo>({
  id: 0,
  name: '',
  avatar: null,
  registerTime: '--',
  classInfo: '--',
  school: '--',
  activityLevel: '--',
  onlineTime: '--',
  lastLogin: '--',
  studentId: '--',
  phone: '--',
  email: '--',
  grade: '--',
  className: '--'
})

// 格式化日期
const formatRegisterTime = (timestamp: string) => {
  if (!timestamp) return '--'
  const date = new Date(timestamp)
  return `${date.getFullYear()}年${date.getMonth() + 1}月`
}

const handleMenuChange = (menuKey: string) => {
  activeMenu.value = menuKey
}

onMounted(() => {
  // 从localStorage加载学生信息
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr)

    // 将接口返回的数据映射到studentInfo
    studentInfo.value = {
      id: userInfo.id || 0,
      name: userInfo.name || '--',
      avatar: userInfo.avatar || null,
      registerTime: formatRegisterTime(userInfo.createTime),
      classInfo: userInfo.className ? `${userInfo.className}` : '--',
      school: '某某中学', // 需要从其他接口获取
      activityLevel: '--',
      onlineTime: '--',
      lastLogin: '--',
      studentId: userInfo.studentId || '--',
      phone: userInfo.phone || '--',
      email: userInfo.email || '--',
      grade: userInfo.grade || '--',
      className: userInfo.className || '--'
    }
  }
})
</script>

<style scoped>
.student-center-container {
  padding: 20px;
  background-color: #f5f7fa;
  //min-height: 100vh;
}

.box-card {
  margin: 0 auto;
  max-width: 1200px;
}

.student-content {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.content-main {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  min-height: 500px;
}

.feature-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style>
